<template>
  <div class="container">
    <!-- 头部的按钮 -->
    <div class="headertop">
      <i @click="libraries"></i>
      <i></i>
    </div>

    <!-- 书本介绍信息 -->
    <div class="message">
      <div class="left">
        <img :src="list.img" alt="" />
      </div>

      <div class="right">
        <div class="top">
          <div class="first">
            <h6>{{ list.title }}</h6>
          </div>

          <div class="second">
            <h5>{{ title }}</h5>
          </div>
        </div>

        <div class="third" @click="jiaru(list)" v-if="!list.show">加入学习</div>
        <div class="third2" v-if="list.show">已加入</div>
      </div>
    </div>

    <!-- 视频列表 -->
    <div class="viedolists">
      <div class="title">视频列表</div>

      <!-- 视频 -->
      <div class="datalists">
        <!-- 要循环的 -->
        <div class="contentlists" v-for="(item, index) in video" :key="index">
          <!-- 视频标题 -->
          <div class="name" @click="television(item.id)">
            <h6>
              {{ item.title }}
            </h6>
            <h6>
              <!-- 0.{{ (parseInt(item.buyers) / 200) }} -->
              <!-- 时间 -->
              {{ item.duration }}
            </h6>
          </div>
          <!-- 下 -->
          <div class="down">
            <i
              @click="lowdown(item, index)"
              v-if="nums != index"
              v-show="!item.showthis"
            ></i>
            <van-circle
              v-model:current-rate="currentRate"
              :rate="100"
              :speed="100"
              :text="text"
              :color="gradientColor"
              :stroke-width="100"
              v-if="nums == index"
              v-show="!item.showthis"
              size="25px"
            />
            <i v-show="item.showthis"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getData } from "../assets/api/home";
import { getvideoData } from "../assets/api/video";
import { reactive, ref, toRefs } from "@vue/reactivity";
import { useRouter } from "vue-router";
import { computed, onMounted } from "vue";
export default {
  setup() {
    let router = useRouter();
    //接收信息
    let list = ref(JSON.parse(window.localStorage.getItem("datas")));
    let title = ref("");
    if (list.value.title.includes("四级")) {
      title.value = "四级";
    } else if (list.value.title.includes("六级")) {
      title.value = "六级";
    } else if (list.value.title.includes("考研")) {
      title.value = "考研";
    } else if (list.value.title.includes("专四")) {
      title.value = "专四";
    } else {
      title.value = "专八";
    }
    let video = ref("");
    //获取电视数据
    getvideoData().then((res) => {
      // console.log(res.data.data.response.videos);
      video.value = res.data.data.response.videos;
      //要循环的视频内容
      video.value.forEach((item) => {
        item.showthis = false;
      });
      // console.log(video.value,122);
      //判断是否下载
      let changeright = ref(
        JSON.parse(window.localStorage.getItem("readydown"))
      );
      //获取存储到本地的已经下载的
      if (!changeright) {
        //若为空就return
        return;
      } else {
        // 否则匹配
        // changeright.value.forEach((item) => {
        //   let index2 = video.value.findIndex((item2) => {
        //     return item2.id == item.id;
        //   });
        //   if (index2 != -1) {
        //     video.value[index2].showthis = true;
        //   }
        // });
        console.log(changeright.value);
      }
    });

    //跳转电视
    let television = (id) => {
      //点击获取id值
      //通过id值匹配下标
      let index = video.value.findIndex((item) => {
        return item.id == id;
      });
      console.log(index);
      //点击跳转后传index值
      router.push({
        path: "/television",
        query: {
          id: index,
        },
      });
    };
    let Data = reactive({
      myData: [],
      // 要上传到本地储存的数据
      losg: [],
    });

    // let key = route.query.key
    // 加入书架
    let jiaru = (data) => {
      list.value.show = !list.value.show;
      //   console.log("11222", Data);
      Data.losg.push(data);
      window.localStorage.setItem("losg", JSON.stringify(Data.losg));
    };

    let libraries = () => {
      //    console.log("1");
      router.push({
        path: "/libraries",
      });
    };
    let getDataFun = () => {
      getData().then((res) => {
        Data.myData = res.data.results.body.netList;
        // console.log(Data.myData);
      });
    };

    onMounted(() => {
      let aa = JSON.parse(window.localStorage.getItem("losg"));
      console.log(aa);

      if (aa == null || aa.length == 0) {
        return;
      } else {
        Data.losg = aa;
        if (aa.findIndex((item) => item.key == list.value.key) != -1) {
          list.value.show = true;
        }
      }
    });
    //保存进下载列表
    let readydown = ref([]);
    //离线下载是否显示
    let nums = ref(null);
    //离线下载

    //计时器
    let setIntervalFun = (item) => {
      let times = setInterval(() => {
        currentRate.value = Math.floor(currentRate.value + 1);

        // 等于100的时候停止定时器
        if (currentRate.value > 100) {
          clearTimeout(times);
          //改变值
          video.value[nums.value].showthis = true;
          //首先判断本地有没有
          let localdown = ref(
            JSON.parse(window.localStorage.getItem("readydown"))
          );
          // console.log(localdown.value);
          //如果没有或者为0则
          if (!localdown.value) {
            readydown.value.push(video.value[nums.value]);

            window.localStorage.setItem(
              "readydown",
              JSON.stringify(readydown.value)
            );
          } else {
            //判断内存里是否已经有了
            let thisdata = localdown.value.findIndex((item2) => {
              return item2.id == item.id;
            });
            //如果没有就添加
            if (thisdata == -1) {
              //否则取出在保存
              localdown.value.push(video.value[nums.value]);
              window.localStorage.setItem(
                "readydown",
                JSON.stringify(localdown.value)
              );
            }
            console.log(localdown.value);
          }
        }
      }, 10);
    };
    //点击下载事件
    let lowdown = (item, index) => {
      //   console.log(item, index); //获得下标和值
      nums.value = index;
      currentRate.value = 0;
      setIntervalFun(item);
    };

    //环形进度条
    const currentRate = ref(0);
    //进度条的文字
    const text = computed(() => currentRate.value.toFixed(0) + "%");
    //环形颜色
    const gradientColor = {
      "0%": "#3fecff",
      "100%": "#6149f6",
    };

    getDataFun();

    return {
      libraries,
      television,
      ...toRefs(Data),
      jiaru,
      list,
      title,
      video,
      lowdown,
      text,
      currentRate,
      gradientColor,
      nums,
    };
  },
};
</script>
<style lang="scss" scoped>
@import "../assets/css/base.css";
::v-deep .van-circle__text {
  transform: scale(0.6);
  top: 3px;
  left: -5px;
}
.container {
  // height: 100vh;
  background-color: #f4f3f8;
}

.headertop {
  padding: 0px 15px;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  height: 43px;
  align-items: center;

  i:nth-child(1) {
    display: block;
    width: 18px;
    height: 18px;
    background-image: url(../assets/img/back.png);
    background-size: 18px 18px;
  }

  i:nth-child(2) {
    display: block;
    width: 18px;
    height: 18px;
    background-image: url(../assets/img/ic_share.png);
    background-size: 18px 18px;
  }
}

.message {
  padding: 0px 15px;
  display: flex;

  .left {
    width: 114px;
    box-shadow: 2px 2px 10px #e0dfdf;

    img {
      width: 100%;
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    margin-left: 14px;
    justify-content: space-between;

    .top {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .first {
        h6 {
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          font-weight: 600;
          width: 144px;
          // overflow: hidden; // 溢出部分隐藏
          white-space: wrap; // 文字不换行
          // text-overflow: ellipsis; // 显示省略号
        }
      }

      .second {
        margin-top: 30px;
        h5 {
          display: inline;
          height: 17px;
          line-height: 17px;
          background-color: #e9eaff;
          color: #7c85e9;
          padding: 0px 10px;
          border-radius: 8px;
        }
      }
    }

    .third {
      display: inline;
      background-color: #5562ed;
      color: #fefefe;
      padding: 0px 10px;
      height: 26px;
      line-height: 26px;
      border-radius: 15px;
      font-weight: 500;
      font-size: 14px;
      text-align: center;
    }
    .third2 {
      display: inline;
      background-color: #aaaaaa;
      color: #fefefe;
      padding: 0px 10px;
      height: 26px;
      line-height: 26px;
      border-radius: 15px;
      font-weight: 500;
      font-size: 14px;
      text-align: center;
    }
  }
}

.viedolists {
  display: flex;
  flex-direction: column;
  margin-top: 20px;

  .title {
    padding: 0px 15px;
    background-color: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 42px;
    line-height: 42px;
    border-bottom: 1px solid #dedede;
  }

  .contentlists::before {
    display: block;
    content: "";
    width: 15px;
    height: 15px;
    background-image: url(../assets/img/icon-play.jpg);
    background-size: 15px 15px;
    position: absolute;
    left: 15px;
    border-radius: 3px;
  }

  .datalists {
    background-color: #fff;

    .contentlists {
      padding-right: 15px;
      margin-left: 45px;
      display: flex;
      justify-content: space-between;
      margin-top: 15px;
      border-bottom: 1px solid #ebebeb;
      align-items: center;

      .name {
        display: flex;
        flex-direction: column;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        h6:nth-child(1) {
          font-size: 14px;
          color: #3c3c3c;
          height: 25px;
          line-height: 25px;
          padding-top: 5px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        h6:nth-child(2) {
          font-size: 12px;
          color: #8f8e96;
          height: 21px;
          line-height: 21px;
          margin-bottom: 10px;
        }
      }

      .down {
        i {
          display: flex;
          width: 20px;
          height: 20px;
          background-image: url(../assets/img/icon_download_round.png);
          background-size: 20px 20px;
        }
        i:nth-child(2) {
          display: flex;
          width: 20px;
          height: 20px;
          background-image: url(../assets/img/true.png);
          background-size: 20px 20px;
        }
      }
    }
  }
}
</style>